<template>
  <div class="myselfContanier" >
      <!-- 搜索框说 -->
      <transition name="myAn">
        <yl-search class="ylsearch" v-if="!showMenu"  :submit="search" :ylstyle=" searchStyle" style="position:fixed;z-index:100;width:100%"></yl-search>
      </transition>
      <baidu-map class="map" :theme="theme"  @ready="mapReady">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
          <!-- 自己头像 -->
          <self-overflow :position='{lng:myPoints.gpsposition.lng,lat:myPoints.gpsposition.lat}' v-if="myShow">
          </self-overflow>
             <!-- 遮盖物 -->
        <div v-for="(poi,num) of points" :key="num" class="mySample"  v-if="true">
            <my-overflow
              :position='{lng:poi.gpsposition.lng,lat:poi.gpsposition.lat}'
              :text="poi.name"
              :color="poi.color"
              :index='num'
              :count='poi.count'
              :soundShow="poi.soundShow"
              @changeColor="resiveIndex"
              :zoom='zoom'>
            </my-overflow>
        </div>
      </baidu-map>
      <!-- 上方弹起框 -->
      <transition name="fade">
          <div class="model" v-if="modelShow">
              <div class="speak">
                  <yd-icon v-show="labaShow"  name="sound" class="laba"  custom slot="icon" size=".45rem" color='#bcfc6a'></yd-icon>
                  <ul :style="{position:'absolute',left:'.9rem',top:'.36rem'}"  >
                      <li :style="{float:'left',backgroundColor:'#bcfc6a',margin:'0 .08rem',width:'.06rem',height:'.25rem'}"></li>
                      <li :style="{float:'left',backgroundColor:'#bcfc6a',margin:'.05rem .08rem 0',width:'.06rem',height:'.2rem'}" v-for="(n,index) in 6" :key="index"></li>
                  </ul>
                  <div>
                  </div>
                  <img :src="points[modelNum].photo" >
                  <p> - - {{points[modelNum].name}} - - </p>
              </div>
          </div>
      </transition>
      <!-- 下方对讲功能 -->
      <div class="btmSpeak">
          <ul>
              <li @click="uList">
                  <yd-icon name="information"  custom slot="icon" size=".4rem" color='#ffffff' style="position:absolute;z-index:1"></yd-icon>
              </li>
              <li @touchstart="speakStart($event)" @touchend="speakEnd($event)">
                  <yd-icon name="speak"  custom slot="icon" size=".78rem" :color='speakColor' style="position:absolute;z-index:1"></yd-icon>
              </li>
              <li @click="msg">
                  <yd-icon name="write"  custom slot="icon" size=".4rem" color='#ffffff' style="position:absolute;z-index:1"></yd-icon>
              </li>
      </ul>
    </div>
    <!-- 左侧列表 -->
    <transition name="fade">
      <div class="btn"  v-show="showMenu" @click="showMenu=false">
        <yd-icon name="drop"  custom slot="icon" size=".3rem" color='#ffffff'></yd-icon>
      </div>
    </transition>
    <transition name="fade">
      <ul class="menu" v-show="!showMenu" >
        <li v-for="(menu,index) of menuDetail" :key="index">
          <yd-icon :name="menu.name"  custom slot="icon" size=".4rem" color='#ffffff'></yd-icon>
        </li>
        <li @click="showMenu=true" style="margin-top:1px"><yd-icon name="up"  custom slot="icon" size=".3rem" color='#ffffff'></yd-icon> </li>
      </ul>
    </transition>

  </div>
</template>
<script>
import myOverflow from '@/components/map/myOverflow'
import selfOverflow from '@/components/map/selfOverflow'
import ylSearch from '@/components/search'
import bus from '@/common/js/base/eventBus.js'
import fun from '@/common/js/base/audio.js'
import {mapState} from 'vuex'
export default {
  components:{myOverflow,ylSearch,selfOverflow},
  data(){
      return{
        ip:this.$store.state.ip,
        page:'1',
        theme:[//地图主题
          {
            "featureType": "all",
            "elementType": "all",
            "stylers": {"weight": "0.8","lightness": 38,"saturation": -44}
          }
        ],
        searchStyle:{
          height:'1',//高度，必须
          bgcolor:'#FFB36E',//背景，可选
          remind:'搜索想找的人',//placeholder可选
          close:false, //开关 可选
        },
        fatherShow:false,
        myShow:false,
        showMenu:true,
        modelShow:false,
        modelNum:null,
        labaShow:true,
        list:null,//  存放用户
        speakColor:'#EF8356',
        myPoints:{'gpsposition':{'lng':"",'lat':''}},
        zoom:'',
        points:[
            // {"name":"张大爷","color":"#595f6f","soundShow":false,"count":"1","photo":require("./img/1.jpg"),'gpsposition':{'lng':"104.204022",'lat':'30.568816'}},
            // {"name":"王大爷","color":"#595f6f","soundShow":false,"count":"5","photo":require("./img/2.jpg"),'gpsposition':{'lng':"104.354074",'lat':'30.69858'}},
            // {"name":"李大爷","color":"#595f6f","soundShow":false,"count":"22","photo":require("./img/3.jpg"),'gpsposition':{'lng':"104.089038",'lat':'30.613085'}},
            // {"name":"你大爷","color":"#595f6f","soundShow":false,"count":"0","photo":require("./img/4.jpg"),'gpsposition':{'lng':"103.959682",'lat':'30.572299'}},
        ],
        menuDetail:[//下拉菜单
          {"name":"friends"},
          {"name":"poisition"},
          {"name":"gai"},
          {"name":"car"},
          {"name":"doctor"},
          {"name":"house"},
        ],

      }
    },
    watch:{
      msg(newVal,oldVal){
        // console.log(this.msg)
      },
    },
    methods:{
      search(){//搜索
        console.log("开始搜索啦")
      },
      speakStart(e){//开始录音
        e.currentTarget.style.backgroundColor="#EF8356"
        this.speakColor="#ffffff"
        fun.startReady()
      },
      speakEnd(e){
        e.currentTarget.style.backgroundColor="#ffffff";
        this.speakColor="#EF8356";
        fun.stopReady();
//        fun.upload()
      },
      resiveIndex(data){//接收子组件参数，进行相应操作
        let myColor=this.points;//保存用户数据
        for(let i=0;i<myColor.length;i++){
          if(i!=data){
            myColor[i].color="#595f6f";
            myColor[i].soundShow=false;
          }
        }
        myColor[data].color="#595f6f";//更改图标字体颜色
        myColor[data].soundShow=!myColor[data].soundShow;
        if(myColor[data].soundShow){
          myColor[data].color="#f47d43";
        }
        this.modelShow=myColor[data].soundShow;
        this.modelNum=data
      },
      uList(){//跳转附近的人
        this.$router.push({name:'uList',query:{data:this.list}})
    },
      msg(){//用户消息
      this.$router.push({name:'latestMsg'})
    },
      mapReady({BMap, map}){//地图原生事件
            let that=this;  //保存this指向
            let mapPoints=that.points.slice(0);
            if(that.myPoints.gpsposition.lng!=""&&that.myPoints.gpsposition.lat!=""){
              mapPoints.unshift(that.myPoints);
            }

            function setZoom(points){//根据坐标计算地图级别
              if(points.length>0){
                var maxLng = points[0].gpsposition.lng;
                var minLng = points[0].gpsposition.lng;
                var maxLat = points[0].gpsposition.lat;
                var minLat = points[0].gpsposition.lat;
                for (var i = points.length - 1; i >= 0; i--) {
                  var res = points[i].gpsposition;
                  if(res.lng > maxLng) maxLng =res.lng;
                  if(res.lng < minLng) minLng =res.lng;
                  if(res.lat > maxLat) maxLat =res.lat;
                  if(res.lat < minLat) minLat =res.lat;
                };
                var cenLng =(parseFloat(maxLng)+parseFloat(minLng))/2;
                var cenLat = (parseFloat(maxLat)+parseFloat(minLat))/2;
                var zoom = getZoom(maxLng, minLng, maxLat, minLat);
                map.centerAndZoom(new BMap.Point(cenLng,cenLat), zoom);
              }else{
                //没有坐标，显示全中国
                map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5);
            }
        };
         function getZoom (maxLng, minLng, maxLat, minLat) {
                var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"]//级别18到3。
                var pointA = new BMap.Point(maxLng,maxLat);  // 创建点坐标A
                var pointB = new BMap.Point(minLng,minLat);  // 创建点坐标B
                var distance = map.getDistance(pointA,pointB).toFixed(1);  //获取两点距离,保留小数点后两位
                for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
                    if(zoom[i] - distance > 0){
                        return 17-i+3;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                    }
                };
            }
             //   设置地图初始位置
            setZoom(mapPoints)
            window.mytimer= setInterval(()=>{
                  that.zoom=map.getZoom()
            })
      },
      around(){
      var datas = null;
      var that = this;
      var item = [];
      let data={
        lat:JSON.stringify(this.$store.state.locations.lat),
        lng:JSON.stringify(this.$store.state.locations.lng),
        userId:localStorage.userid,
//        lng:'104.188148',
//        lat:'30.568834'
      };
      this.ylAjax.around(data)
      .then(msg=>{
        this.list = msg.data;
        this.fatherShow=true;
        message(msg)
      })
      .catch(msg=>{
//        console.log(msg)
      });
      function message(data) {
        datas = data.data;
        for (var i=0;i<datas.length;i++){
          if(datas[i].lng!=''&&datas[i].lat!=''){
            datas[i].gpsposition = {'lat':datas[i].lat,'lng':datas[i].lng};
            datas[i].count = datas[i].number;
            datas[i].name = datas[i].name;
            datas[i].soundShow = false;
            datas[i].color = '#595f6f0'
          }else {

          }
        }
        that.points = datas
         console.log(that.points)
      }
    },
  location(){
      this.$GPS
      this.myShow=true
    },
    audio(){
        let audiolist = this.audioList;
      let data={
        lat:JSON.stringify(this.locations.lat),
        lng:JSON.stringify(this.locations.lng),
//        lng:'104.188148',
//        lat:'30.568834'
      };
      this.ylAjax.checkhi(data).then(msg=>{
        for (var i=0;i<msg.data.length;i++){
          let num = audiolist.indexOf(msg.data[i].id)
          if(num==-1){
            for (var n=0;n<this.points.length;n++){
              if(msg.data[i].userId==this.points[n].userId){
                this.points[n].soundShow =true
              }else {
                this.points[n].soundShow =false
              }
            }
            fun.startPlay(this.ip+msg.data[i].url)  //播放语音
            audiolist.push(msg.data[i].id)
            this.audioList = audiolist
            console.log(this.audioList)
          }else {
            continue
          }
        }
      }).catch(msg=>{
        console.log(msg)
      })
    }
  },
  computed:mapState(["locations"]),
  mounted(){
    setInterval(this.location,500)
  },
  activated(){
    bus.$emit('mapPage',this.page)
    this.around()
    this.myPoints.gpsposition={
      lat:this.$store.state.locations.lat,
      lng:this.$store.state.locations.lng
    };
    window.time=setInterval(this.audio,3000)
    if(localStorage.audioList!=undefined){
      this.audioList = JSON.parse(localStorage.audioList);
    }else {
      this.audioList = []
    }

  },
  deactivated(){//离开地图页面
    localStorage.audioList = JSON.stringify(this.audioList)
    clearInterval(window.mytimer)
    clearInterval(window.time)
  }
}
</script>
<style lang="less" scoped>
  @import "~less/base";
  .myselfContanier{
    position: absolute;
    top: .97rem;
    bottom: 0;
    width: 100%;
    img{
      max-width: 100%;
      max-height: 100%;
    }
    .map{//地图容器
      width: 100%;
      height: 100%;
    }
    .ylsearch{
      position: fixed;
      top: 0;
      z-index: 100
    }
    .model{//用户发语音模态框
      position: absolute;
      width: 3.5rem;
      height:4rem;
      background-color:@model-color;
      top: .5rem;
      left: 50%;
      margin-left: -3.5/2rem;
      border-radius: 10px;
      .laba{//喇叭
        position: absolute;
        top: .25rem;
        left: .25rem;
      }
      img{//用户头像
        position: absolute;
        width: 1.4rem;
        border-radius: 50%;
        top: .8rem;
        left: 50%;
        // margin-top: -.7rem;
        margin-left: -.7rem;
        border: .04rem solid @color-border4;
      }
      p{
        text-align: center;
        color: @color-c;
        font-size: 16px;
        margin-top: 2.4rem;
      }
    }
    .btmSpeak{//下方对讲按钮
      height: 2.5rem;
      width: 100%;
      position: absolute;
      bottom: 0;
      ul{//3个功能按钮
        li{
          float: left;
        }
        >:nth-child(1),>:nth-child(3){
          width: 1rem;
          height: 1rem;
          position: absolute;
          top: 50%;
          margin-top: -.5rem;
          background-color: @color-btn1;
          border-radius: 50%;
          i{
            top: 50%;
            left: 50%;
            margin-top: -.2rem;
            margin-left: -.2rem;
          }
        }
        >:nth-child(1){
          left: 18%;
        }
        >:nth-child(3){
          right: 18%;
        }
        >:nth-child(2){
          width: 1.85rem;
          height: 1.85rem;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-top: -1.85/2rem;
          margin-left: -1.85/2rem;
          background-color: @color-btnBack1;
          border-radius: 50%;
          border: .04rem solid @color-border5;
          i{
            top: 50%;
            left: 50%;
            margin-top: -.4rem;
            margin-left: -.4rem;
          }
        }
      }
    }
    .btn{//展开按钮
      position: absolute;
      top: .2rem;
      right: .1rem;
      background-color: @background-a;
      opacity: .5;
      width: .9rem;
      height: 1rem;
      text-align: center;
      line-height: 1rem;
    }
    .menu{//展开菜单
      position: absolute;
      top: .2rem;
      right: .1rem;
      /*opacity: .5;*/
      li{
        background-color:@background-a;
        width: .9rem;
        height: .9rem;
        text-align: center;
        line-height: .9rem;
      }
    }
    .fade-enter-active, .fade-leave-active {
      transition: all 1s
    }
    .fade-enter, .fade-leave-to  {
      // height: 50%;
      opacity: 0;
    }
    .myAn-enter-active{//自定义动画

      animation: bounce-in .5s;
    }
    .myAn-leave-active{

      animation: bounce-in .5s reverse;
    }
    .myAn-enter,.myAn-leave-to{
      @keyframes bounce-in {
        0% {
          transform: scale(0);
        }
        50% {
          transform: scale(1.2);
        }
        100% {
          transform: scale(1);
        }
      }
    }
  }
</style>
